<template>
	<view>
		<view class="header">
			<view class="shouji d-flex">
				<image src="../../static/img/login/shoujihao.png" mode="widthFix" style="width: 35rpx;height: 40rpx;">
				</image>
				<input class="uni-input" maxlength="11" type="number" placeholder="请输入手机号(只能是11位数字)" v-model="username"
					@focus="Focus" @blur="Blur" />
			</view>
			<view class=" d-flex shouji">
				<image src="@/static/img/login/yanzhengma.png" mode="widthFix" style="width: 35rpx;height: 40rpx;">
				</image>
				<input class="uni-input" maxlength="10" placeholder="请输入验证码" v-model="code" @focus="Focus" @blur="Blur"
					type="number" />
				<button class="text" @tap="Code">{{btnstr}}</button>
			</view>
			<view class=" d-flex shouji">
				<image src="@/static/img/login/mimashezhi.png" mode="widthFix" style="width: 40rpx;height: 42rpx;">
				</image>
				<input class="uni-input " :password="showPassword" minlength="12" placeholder="请输入密码" v-model="password"
					@focus="Focus" @blur="Blur" />
				<image class="pawicon" :src="showPassword== true ? eve:eve_avtion" mode="widthFix"
					@click="changePassword"></image>
			</view>
		</view>

		<view class="">
			<button class="btn" @tap="Gologin" :style="{'background-color':backgroundColor}">注册</button>

		</view>

		<view class="d-flex ">

			<label class="d-flex" @click="selectItem">
				<view class="radio">
					<radio style="transform:scale(0.8)" value="1" color="#e80909" :checked="checked"></radio>
				</view>
			</label>
			<view class="d-flex fs24">
				<view @click="selectItem">我已阅读并同意</view>
				<view style="color: red;" @tap="goServiceContract()">《服务协议》</view>
				<view style="color: red;" @tap="goPrivacyPolicy()">《个人信息保护政策》</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				btnstr: '获取验证码',
				numShow: false,
				second: 60,
				checked: false,
				showPassword: true,
				eve: "/static/img/login/biyan.png",
				eve_avtion: "/static/img/login/zhengyan.png",
				password: '',
				username: '',
				code: '',
				backgroundColor: '#ce0a08',

			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),

		},
		methods: {
			...mapMutations(['login', 'logout']),
			Focus() {
				this.backgroundColor = "#e80909"
			},
			Blur() {
				this.backgroundColor = "#ce0a08"
			},
			selectItem() {
				this.checked = !this.checked

			},
			changePassword() {
				if (this.password.length > 0) {
					this.showPassword = !this.showPassword
				}

			},

			async Gologin() {
				if (!(this.username.length > 0)) {
					uni.showToast({
						title: '手机号不能为空',
						icon: "none"
					})
					return
				}
				if (!(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this
						.username))) {
					uni.showToast({
						title: '手机号错误',
						icon: "none"
					})
					return
				}
				if (!this.checked) {
					uni.showToast({
						title: '请勾选隐私条款',
						icon: "none"
					})
					return
				}

				let reg = await this.$myRequest({
					url: '/register',
					methods: 'POST',
					data: {
						mobile: this.username,
						code: this.code,
						password: this.password,

					},
				})

				let rdata = reg.data

				if (rdata.status == 1) {
					this.$api.msg(rdata.msg);
					setTimeout(() => {
						let token = rdata.token;
						uni.setStorageSync('token', token)
						this.Login(token)
					}, 1500)
				}
				// console.log(reg)
			},

			async Login(token) {
				let UIfo = await this.$myRequest({
					url: '/getUserInfo',
					methods: 'POST',
					data: {
						token: token
					}
				})
				if (UIfo.data.status == 1) {
					let userInfo = UIfo.data.data

					this.login(userInfo)
					uni.showToast({
						title: '登陆成功',
						icon: "none"
					})
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},

			async Code() {
				if (!(this.username.length > 0)) {
					uni.showToast({
						title: '手机号不能为空',
						icon: "none"
					})
					return
				}
				if (!(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this
						.username))) {
					uni.showToast({
						title: '手机号错误',
						icon: "none"
					})
					return
				}
				let Code = await this.$myRequest({
					url: '/getCode/' + this.username,
				})
				uni.showToast({
					title: '发送成功',
					icon: "none"
				})

				this.btnstr = '60s'
				this.numShow = true
				var interval = setInterval(() => {
					--this.second;
					this.btnstr = this.second + 's'
					if (this.second <= 0) {
						clearInterval(interval);
						this.btnstr = '获取验证码';
						this.numShow = false;
						this.second = 60
					}
				}, 1000)
			},

			async goServiceContract() {
				uni.navigateTo({
					url: '/pages/docs/service-contract'
				})
			},

			async goPrivacyPolicy() {
				uni.navigateTo({
					url: '/pages/docs/privacy-policy'
				})
			}
		},
	}
</script>

<style lang="scss">
	.radio {
		margin-left: 45rpx;
		margin-top: 10rpx;
	}

	.fs24 {
		font-size: 25rpx;
		margin-top: 15rpx;
	}

	.btn {
		color: white;
		background-color: #e80909;
		border-radius: 10rpx;
		margin: 30rpx 40rpx 20rpx 40rpx;
	}

	.text {
		color: white;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		background-color: #f88b0d;
		border-radius: 10rpx;
		align-self: center;
		padding: 0 24upx;
	}

	.header {
		margin-top: 30rpx;
	}

	.shouji {
		background-color: #f4f4f4;
		margin: 0 45rpx 30rpx 45rpx;
		height: 40rpx;
		padding: 30rpx;
		border-radius: 80rpx;
		align-items: center;
	}

	.uni-input {
		padding-left: 15rpx;
		padding-top: -10rpx;
		letter-spacing: 2rpx;
		width: 50%;
		flex: 1;
	}

	.pawicon {
		width: 30rpx;
		height: 20rpx;
		margin-left: 250rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}
</style>
